<template>
  <timeline>
    <timeline-title v-for="(item,index) in lineData" :key="index">
        <!-- 头部及标题 -->
        <img class="header" :src="item.header" />
        <span class="name">
          {{item.name}}
        </span>

        <timeline-item v-for="(mes,ind) in item.messages" :key="ind" color="#9dd8e0">{{mes}}</timeline-item>
    </timeline-title>
  </timeline>
</template>
<script>
import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline';

// 时光轴
export default {
  name: "timerShaft",
  data(){
    return {
      lineData:[{
        header:require('@/assets/z3.jpg'),
        name:"laoxu",
        messages:["happy birthday！","day one day"]
      },{
        name:"老徐",
        header:require('@/assets/z4.jpg'),
        messages:["生日快乐!","一天一天"]
      }]
    };
  },
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  }
};
</script>
<style lang="scss" scoped>
$headerW: 50px;

.header {
  width: $headerW;
  height: $headerW;
  border-radius: 50%;
  display: inline-block; 
  vertical-align: middle;
}

.name {
  padding-left: 10px;
}

</style>
